Defront — про фронтенд-разработку и не только

Производительность рендеринга в браузерах

Мэт Перри — автор библиотек Framer Motion и Moion One — рассказал про особенности и трудности создания плавных анимаций.

Плавные анимации достигаются за счёт оптимизации рендеринга и использования аппаратного ускорения. При оптимизации рендеринга нужно учитывать, что некоторые свойства приводят к перерасчёту раскладки страницы. Но если эти свойства используются в изолированном контексте, например, с position: absolute, то вполне можно достичь 60 fps. В сети можно найти список этих свойств (CSS Triggers), но он долгое время не обновлялся. Так например, обработка SVG и CSS-свойства filter в Firefox и Chrome уже выносится на GPU, а в Chrome скоро появится поддержка ускорения анимаций clip-path и background-color.

Все браузеры для анимаций используют аппаратное ускорение. В Safari оно реализовано с помощью системной библиотеки Core Animation. Она несовместима с Web Animation API, из-за чего в некоторых случаях ускорение может отключаться.

Полезная статья. Рекомендую почитать всем, кто интересуется темой производительности рендеринга.

#performance #rendering

https://motion.dev/guides/performance

motion.dev

Performance | Motion for JavaScript

What makes an animation perform well? Perform poorly? Get the most performance from your web animations with Motion.

www.tg-me.com/us/Defront при поддержке Зарплата ру — про фронтенд разработку и не только/com.defront/1124

3.7K viewsAlexander Myshov, edited  Feb 1, 2022 at 17:50

Производительность рендеринга в браузерах

Мэт Перри — автор библиотек Framer Motion и Moion One — рассказал про особенности и трудности создания плавных анимаций.

Плавные анимации достигаются за счёт оптимизации рендеринга и использования аппаратного ускорения. При оптимизации рендеринга нужно учитывать, что некоторые свойства приводят к перерасчёту раскладки страницы. Но если эти свойства используются в изолированном контексте, например, с position: absolute, то вполне можно достичь 60 fps. В сети можно найти список этих свойств (CSS Triggers), но он долгое время не обновлялся. Так например, обработка SVG и CSS-свойства filter в Firefox и Chrome уже выносится на GPU, а в Chrome скоро появится поддержка ускорения анимаций clip-path и background-color.

Все браузеры для анимаций используют аппаратное ускорение. В Safari оно реализовано с помощью системной библиотеки Core Animation. Она несовместима с Web Animation API, из-за чего в некоторых случаях ускорение может отключаться.

Полезная статья. Рекомендую почитать всем, кто интересуется темой производительности рендеринга.

#performance #rendering

https://motion.dev/guides/performance

BY Defront — про фронтенд-разработку и не только